<template>
   <div id="pageone" class="pageone">
     <div class="toppart">
       <div class="leftpart">
         <div class="pan1">
           <div class="flexi">
             <div style="font-size: large;font-weight: 700;">98.77%</div>
             <div > 2季度新车收入占比</div>
           </div>
           <div class="flexi">
             <div style="font-size: large;font-weight: 700;">1.77%</div>
             <div > 2季度新车一级毛利率</div>
           </div>
         </div>
         <div class="pan2">
           <div class=" flexi">
             <div style="font-size: large;font-weight: 700;">98.77%</div>
             <div > 2季度新车收入占比</div>
           </div>
           <div class="flexi">
             <div style="font-size: large;font-weight: 700;">1.77%</div>
             <div > 2季度新车一级毛利率</div>
           </div>
         </div>
         <div class="pan3">
           <div class="flexi">
             <div style="font-size: large;font-weight: 700;">98.77%</div>
             <div > 2季度新车收入占比</div>
           </div>
           <div class="flexi">
             <div style="font-size: large;font-weight: 700;">1.77%</div>
             <div > 2季度新车一级毛利率</div>
           </div>
         </div>
       </div>
       <div class="rightpart" id="mychart1"></div>
     </div>
     <div class="bottompart">
       <div class="bleft" id="mychart2">
       </div>
       <div class="bright" id="mychart3"></div>
     </div>
   </div>
</template>

<script>
export default {
  name: "pageone",
  components:{
  },
  mounted() {
    this.drawLine();
    this.drawPie();
    this.drawBar();
  },
  methods: {
    drawBar(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('mychart1'))
      // 绘制图表
      myChart.setOption({

        grid: {
          left: '15%'
        },
        dataZoom:{//区域缩放
          type: 'slider',//在底部显示滑块
          show:true,//显示
          height:'20px',//高度
          showDetail: false,//滑块文案是否显示
          start:0,//文案开始位置
          end:50//结束为止

        },
        tooltip:{//鼠标滑过显示弹窗
          show:true,
          trigger:'axis',
          formatter:'{a0}:{c0}个<br />{a1}:{c1}个'//弹窗里面的单位
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel:{
            formatter:'{value}月',//给横坐标加单位
            interval:0,//强制让横坐标所有数值都显示
            rotate:30//坐标轴文案旋转角度
          },
        },
        yAxis:
         [ {
            name:'y轴1',
            type: 'value',
            axisLabel:{
              formatter:'{value}个'//给纵坐标加单位
            },
           axisTick:{//坐标刻度显示设置
             show:false//不显示坐标刻度轴
           }
          },
           {
             name:'y轴2',
             type: 'value',
             axisLabel:{
               formatter:'{value}米'//给纵坐标加单位
             },
             axisTick:{//坐标刻度显示设置
               show:false//不显示坐标刻度轴
             }
           }
         ],
        series: [
          {
            name:'柱状图1',
            data: [20, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            label://在柱状图上显示数值
              {
                show: true,
                // position: 'inside',//让数值在里面显示
                position: 'top',//让数值在上方显示
                formatter:'{c}个'//在柱状图上加单位
              },
            barWidth:'30px',

          },
          {
            name:'折线图2',
            data: [120, 200, 20, 70, 30, 110, 130],
            type: 'line',
            label: {
              show: true,
              position: 'top',
              formatter:'{c}米',//在柱状图上加单位
              // offset: [30, 40]
            },
            barWidth: '30px',
            yAxisIndex: 1 //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          }
        ],
        title:{text:'新车业务单元',subtext:'副标题'},
        legend:{//显示图例
          data:['柱状图1','折线图2']//根据series.name显示图例组件
        },
      });
    },
    drawPie(){
      let myChart = this.$echarts.init(document.getElementById('mychart2'));
      myChart.setOption({
        legend:{
          orient:'vertical',
          data:[
            '1区','2区','3区'
          ],
          right:'10%',
          formatter: function (name) {
            return '区域 ' + name;
          }
        },
        series: [
          {
            name:'区域',
            data: [{value:200,name: '1区'}, {value:300,name:'2区'}, {value:400,name:'3区'}],
            type: 'pie',
            radius: '55%',//饼图的半径
            center:['50%','50%'],
            label:{
              formatter:'{a}.{b}.{c}'
            },
          }
        ],
        tooltip:{
          show:true,
          formatter:'{a}.{b}.{c}'
        }
      })
    },
    drawLine(){
      let myChart = this.$echarts.init(document.getElementById('mychart3'))
      myChart.setOption({
        tooltip:{
          show:true,
          trigger: 'axis'
        },
        legend:{},
        series:[
          {
            name:'折线1',
            type:'line',
            data:[100,200,500,321,439,442],
            itemStyle:{//设置折线，拐点标志样式
              color:'pink'
            },
            areaStyle:{//折线下区域
              color:'pink',
              opacity:'0.5'
            }
          },
          {
            name:'折线2',
            type:'line',
            data:[283,192,372,362,384,173],
            itemStyle:{
              color: 'red'
            },
            areaStyle:{
              color:'gray',
              opacity: '0.2'
            },
            smooth:true//折线的弯曲，圆面弯曲
          }
        ],
        xAxis:{
          name:'折线x轴',
          data:['1','2','3','4','5','6']
        },
        yAxis:{
          name:'折线y轴',
          type:'value',
        }
      })
    }
  }
}
</script>

<style scoped>
.pageone{
  display: flex;
  flex-direction: column;
}
.toppart{
  height: 45vh;
  display: flex;
  flex: 1;
}
.leftpart{
  flex: 1;
  display: flex;
  flex-direction: column;
}
.rightpart{
  flex: 2;
}
.bottompart{
  flex: 1;
  display: flex;
  height: 40vh;
}
.bleft{
  flex: 1;
}
.bright{
  flex: 1;
}
.pan1, .pan2, .pan3{
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 2px;
}
.flexi{
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;

}
.pan1{
}
.pan2{
}
.pan3{
}

.pan{
  border: 1px solid gray;
}

</style>
